{% extends "base.html" %}
{% load i18n static compress %}


{% block css %}
    {% compress css %}
        <link rel="stylesheet" href="{% static "css/cytoscape.css" %}">
        <link rel="stylesheet" href="{% static "css/proj.css" %}">
    {% endcompress %}

    <link href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.css" rel="stylesheet" type="text/css" />
{% endblock %}


{% block content %}

<h1 class="project-heading" data-proj-id={{proj_id}}>
    {{proj_name}}
    <br/>
    <div class="project-description"> {{proj_description | default_if_none:""}}</div>
</h1>
<div id="drop-zone">
    <div id="drop-info">
        <p class="info-message">{% trans "Drop here!" %}</p>
    </div>
    <div id="cy" style="z-index:400"></div>
</div>
<div class="fixed-action-btn" style="z-index:9999">
    <a id="cancel-merge" title="{% trans "cancel merge" %}" class="btn-floating waves-effect waves-light btn-large red hide">
        <i class="large material-icons">close</i>
    </a>

    <a id="merge" title="{% trans "merge" %}" class="btn-floating waves-effect waves-light btn-large">
        <i class="large material-icons">call_merge</i>
    </a>
</div>




<!-- MENU -->
<div class="smerge-menu-btn">
    <a href="#menu" class="modal-trigger">
        <i class="medium material-icons">menu</i>
    </a>
</div>


<!-- MENU Modal Structure -->
<div id="menu" class="modal" style="z-index:1003">
    <div class="modal-content">
        <h4>{% trans "Project Settings" %}</h4>
        <p>
            <p>{% trans "Project Pin" %}</p>
            <div class="row">
                    <div class="col s3"></div>
                    <div class="smerge-digit-field col s1">{{proj_pin.0}}</div>
                    <div class="smerge-digit-field col s1">{{proj_pin.1}}</div>
                    <div class="smerge-digit-field col s1">{{proj_pin.2}}</div>
                    <div class="smerge-digit-field col s1">{{proj_pin.3}}</div>
                    <div class="smerge-digit-field col s1">{{proj_pin.4}}</div>
                    <div class="smerge-digit-field col s1">{{proj_pin.5}}</div>
                    <div class="col s3"></div>
            </div>
            <p>{% trans "Password" %}</p>
            <form class="col s12" action="{% url 'change_passwd' proj_id=proj_id %}" method="post">
                {% csrf_token %}
                <div class="row">
                <div class="input-field col s4">
                    <input id="old-password" name="old-password" type="password" class="validate">
                    <label class="active" for="old-password">{% trans "Old Password" %}</label>
                </div>

                <div class="input-field col s4">
                    <input id="new-password" name="new-password" type="password" class="validate">
                    <label class="active" for="new-password">{% trans "New Password" %}</label>
                </div>
                <div class="input-field col s4">
                    <input type ="submit" class ="btn waves-effect waves-light" value = "{% trans "Change" %}"/>
                </div>
                </div>
            </form>

            <p>{% trans "Change Project Name" %}</p>
            <form class="col s12" action="{% url 'change_name' proj_id=proj_id %}" method="post">
                {% csrf_token %}
                <div class="row">

                <div class="input-field col s8">
                    <input id="name" name="name" type="text" value="{{ proj_name }}" class="validate">
                    <label class="active" for="name">{% trans "Title" %}</label>
                </div>
                <div class="input-field col s4">
                    <input type ="submit" class ="btn waves-effect waves-light" value = "{% trans "Change" %}"/>
                </div>
                </div>
            </form>



            <p>{% trans "Change Project Description" %}</p>
            <form class="col s12" action="{% url 'change_description' proj_id=proj_id %}" method="post">
                {% csrf_token %}
                <div class="row">

                <div class="input-field col s8">
                    <input id="descr" name="descr" type="text" value="{{ proj_description | default_if_none:"" }}" class="validate">
                    <label class="active" for="descr">{% trans "Description" %}</label>
                </div>
                <div class="input-field col s4">
                    <input type ="submit" class ="btn waves-effect waves-light" value = "{% trans "Change" %}"/>
                </div>
                </div>
            </form>

            <p>{% trans "Delete Project" %}</p>
            <form class="col s12" action="{% url 'delete_proj' proj_id=proj_id %}" method="post">
                {% csrf_token %}
                <div class="row">
                <div class="col s4 input-field">{% trans "Insert your password to delete this project." %} </div>
                <div class="input-field col s4">
                    <input id="password" name="password" type="password" class="validate">
                    <label class="active" for="password">{% trans "Password" %}</label>
                </div>
                <div class="input-field col s4">
                    <input type ="submit" class ="btn waves-effect waves-light" value = "{% trans "Delete" %}"/>
                </div>

                </div>
                </form>

        </p>
    </div>
    <div class="smerge-menu-modal-footer modal-footer">
        <a href="#!" class="modal-close waves-effect waves-green btn-flat">{% trans "Close" %}</a>
    </div>
</div>

<script>$('#menu').modal()</script>


{% endblock %}






{% block js %}
    {% compress js %}
      <script src="{% static "js/cookie.js" %}"></script>
      <script src="{% static "js/drag-n-drop.js" %}"></script>
      <script src="{% static "js/right-click-menu.js" %}"></script>
      <script src="{% static "js/websocket.js" %}"></script>
    {% endcompress %}



<!-- Load appplication code at the end to ensure DOM is loaded -->
{% include "tree/cytoscape.html" %}


{% endblock %}
